<template>
	<view>
		<mynavigationbar text="邀请用户"/>
		<image src="../../static/images/invite/bg.png" mode="widthFix" style="width: 100%; margin-top: -50rpx;"></image>
		<view class="form">
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item label="权限:">
					<picker @change="bindPickerChange" :value="index" :range="array" class="picker">
						<view class="uni-input">{{array[index]}}</view>
						<uni-icons type="bottom"size="19" class="icon" color="#b2b2b2"></uni-icons>
					</picker>
				</uni-forms-item>
				<uni-forms-item label="姓名:" name="name">
<!-- 					<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" /> -->
					<input class="input" v-model="formData.name" type="text" placeholder="请输入姓名"
						@input="binddata('name',$event.detail.value)" />
				</uni-forms-item>
				<uni-forms-item label="邮箱:" name="email">
<!-- 					<uni-easyinput type="text" v-model="formData.email" placeholder="请输入邮箱" /> -->
					<input class="input" v-model="formData.email" type="text" placeholder="请输入邮箱"
						@input="binddata('email',$event.detail.value)" />
				</uni-forms-item>
			</uni-forms>
			<button @click="submit">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					name: '',
					email: ''
				},
				rules: {
					name: {
						rules: [{
                            required: true,
                            errorMessage: '请输入姓名',
                        },
						{
							minLength: 2,
							maxLength: 5,
							errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
						}]
					},
					// 对email字段进行必填验证
					email: {
						rules: [{
							required: true,
							errorMessage: '请输入邮箱',
						}, {
							format: 'email',
							errorMessage: '请输入正确的邮箱地址',
						}]
					}
				},
				array: ['请选择', '超级管理员', '教师用户', '学生用户'],
				index: 0,
				inviteCode: ''
			}
		},
		onLoad() {
			this.getInviteCode()
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(async res => {
					if(this.index == 0){
						return uni.$showMsg('请选择分配权限')
					}
					res.role = this.index
					const response = await uni.$http.get('/inviteCode/getInviteCodeAndSend', res)
					if(response.statusCode === 200){
						uni.showModal({
							title: '已成功发送',
							content: '发送的邀请码为'+ this.inviteCode,
							showCancel:false
						})
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			bindPickerChange: function(e) {
				this.index = e.target.value
			},
			async getInviteCode(){
				const res = await uni.$http.get('/inviteCode/getInviteCode', { role: this.$store.state.userInfo.role })
				if(res.statusCode === 200){
					this.inviteCode = res.data.data
				}
			},
			loadfont() {
				uni.loadFontFace({
					family: 'ele',
					source: `url('/static/font/ele.TTF')`,
					success() {
			
					},
					fail(res) {
			
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #FFFFFF;
	}
	button {
		position: absolute;
		top: 105%;
		left: 50%;
		transform: translateX(-50%);
		width: 570rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 38rpx;
		color: #fff;
		background-color: #66c2a9;
		border-radius: 50rpx;
	}
	.form {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%);
		.uni-forms-item {
			.input {
				width: 250rpx;
				border-bottom: 1px solid #ccc;
				padding-left: 20rpx;
				.uni-input-placeholder, .input-placeholder {
					color: #bfbfbf;
					font-size: 32rpx;
				}
			}
			.picker {
				color: #bfbfbf;
				font-size: 32rpx;
				border-bottom: 1px solid #ccc;
				padding-left: 20rpx;
				.icon {
					position: absolute;
					top: 0;
					right: 10rpx;
				}
			}
		}
	}
	.label-text {
		position: absolute;
		top: 0;
		left: 55rpx;
		font-size: 29rpx!important;
		color: #65ca90!important;
		font-size: 32rpx!important;
	}
	.uni-error-message-text {
		position: absolute;
		top: -60rpx;
		left: 140rpx;
		width: 300rpx;
	}
</style>
